<template>
	<view class="container">
		<view class="title">
			<text>请选择你的性别</text>
			<text class="subtitle">欢迎来到这里，有趣的朋友等你来发现</text>
			<text class="subtitle tg" @click="onHomePage()">跳过</text>
		</view>
		<view class="gender-selection">
			<view class="gender-option" :class="gender === 'female'?'female':''" @click="selectGender('female')">
				<image :src="gender === 'female' ? femaleSelected : female" class="gender-icon" mode="widthFix"></image>
				<!-- <text :class="['gender-label', { selected: gender === 'female' }]">女士</text> -->
			</view>
			<view class="gender-option" :class="gender === 'male'?'male':''" @click="selectGender('male')">
				<image :src="gender === 'male' ? maleSelected : male" class="gender-icon" mode="widthFix"></image>
				<!-- <text :class="['gender-label', { selected: gender === 'male' }]">男士</text> -->
			</view>
		</view>
		<view class="birthday-selection" @click="dataShow = true">
			<!-- <view class="birthday-input" v-if="!birthday">
				<text>请选择你的生日</text>
				<text>未选择</text>
			</view>
			<view class="birthday-input birthday" v-else>
				{{getBirthday(birthday)}}
			</view>
			<u-datetime-picker
				:show="dataShow"
				v-model="birthday"
				mode="date"
				@cancel="dataShow=false"
				@confirm = "dataShow=false"
				
			>
			
			</u-datetime-picker> -->
			<picker 
				mode="date" 
				fields="day" 
				:value="birthday" 
				:start="startDate" 
				:end="endDate"
				@change="bindDateChange"
			>
				<view class="birthday-input" v-if="!birthday">
					<text>请选择你的生日</text>
					<text>未选择</text>
				</view>
				<view class="birthday-input birthday" v-else>
					{{birthday}}
				</view>
			</picker>
		</view>
		<!-- <button class="next-button" >下一步</button> -->
		<view class="next-button" >
			<u-button
				shape="circle"
				text="下一步" 
				size="large" 
				color="linear-gradient(to right, #45B4FD, #09EAFE)" 
				@click="nextStep"
			></u-button>
		</view>
		
	</view>
</template>

<script>
export default {
	data() {
		return {
			gender: '',
			birthday: '',
			dataShow:false,
			female: require('@/static/login/tag/female-icon.png'),
			femaleSelected: require('@/static/login/tag/female-selected-icon.png'),
			male: require('@/static/login/tag/male-icon.png'),
			maleSelected: require('@/static/login/tag/male-selected-icon.png')
		};
	},
	computed: {
		startDate() {
			return this.getDate('start');
		},
		endDate() {
			return this.getDate('end');
		},
	},

	methods: {
		onHomePage(){
			uni.reLaunch({
				url:"/pages/index/index"
			})
		},
		getDate(type) {
			const date = new Date();
			let year = date.getFullYear();
			let month = date.getMonth() + 1;
			let day = date.getDate();

			if (type === 'start') {
				year = year - 60;
			} else if (type === 'end') {
				year = year + 2;
			}
			month = month > 9 ? month : '0' + month;
			day = day > 9 ? day : '0' + day;
			console.log(`${year}-${month}-${day}`);
			return `${year}-${month}-${day}`;
		},
		getBirthday(birthday){
			const date = new Date(birthday);
			let year = date.getFullYear();
			let month = date.getMonth() + 1;
			let day = date.getDate();
			
			console.log(`${year}-${month}-${day}`);
			return `${year}-${month}-${day}`;
		},
		selectGender(gender) {
			this.gender = gender;
		},
		bindDateChange(e) {
			console.log(e);
			this.birthday = e.target.value;
		},
		nextStep() {
			if (!this.birthday) {
				uni.showToast({
				  title: '请选择生日',
				  icon: 'none'
				});
				return;
			}
			uni.navigateTo({
				url: '/pages_sub/login/select-tags/select-tags?gender='+this.gender+'&birthday='+this.birthday
			});
		}
	}
};
</script>

<style>
.container {
  padding: 0 60rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.tg{
	position: absolute;
	top: 20rpx;
	right: 20rpx;
}
.title {
  font-size: 38rpx;
  font-weight: 700;
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.subtitle {
  font-size: 28rpx;
  color: #999;
  font-weight:500;
  margin-top: 10rpx;
}

.gender-selection {
  display: flex;
  width: 100%;
  justify-content: space-around;
  margin-top: 20px;
}

.gender-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 200rpx;
  /* background-color: #999; */
  padding: 40rpx;
  border-radius: 30rpx;
}
.female{
	box-shadow: 0 0 20rpx 5rpx #fa6bb8;
}
.male{
	box-shadow: 0 0 20rpx 5rpx #34aefa;
}

.gender-icon {
  width: 100px;
}

.gender-label {
  margin-top: 10px;
  font-size: 18px;
}

.gender-label.selected {
  color: #ff69b4;
}

.birthday-selection {
  margin-top: 180rpx;
  width: 100%;
}

.birthday-input {
  border-bottom: 1px solid #ccc;
  padding: 10px 0;
  width: 100%;
  display: flex;
  color: #999;
  text-align: center;
  justify-content: space-between;
}
.birthday{
	justify-content: center;
}

.next-button {
  width: calc(100% - 100rpx);
  position: fixed!important;
  bottom: 100rpx;
  font-weight: bold;
  letter-spacing: 5rpx;
}
</style>
